<!DOCTYPE html>
<html>
    <head>
        <title>VUE Notepad</title>
        <link rel="stylesheet" type="text/css" href="./vueNotepad.css">
    </head>

    <body>
        <section id="app">
            <header>
                <h1>小绿的记事本</h1>
                <input v-model="inputValue" @keyup.enter="add" class="new-todo">
            </header>
            <section id="main">
                <ul class="todo-list">
                    <li v-for="(item, index) in list">
                        <div class="view">
                            <span class="index">{{index}}</span>
                            <label>{{item}}</label>
                            <button class="destroy" @click="remove(index)"></button>
                        </div>

                    </li>
                </ul>
            </section>
            <footer class="footer">
                <span class="todo-count" v-show="list.length != 0">
                    <strong>{{list.length}}</strong> items left
                </span>
                <button v-show="list.length != 0" @click="clear" class="clear-completed">clear all</button>
            </footer>
        </section>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data(){
                    return {
                        list: ["javascript", "cpp", "python"],
                        inputValue: "学编程，学黑客"
                    }
                },
                methods: {
                    add: function(){
                        this.list.push(this.inputValue);
                    },
                    remove: function(index){
                        this.list.splice(index, 1);
                    },
                    clear: function(){
                        this.list = [];
                    }
                }
            })
        </script>
    </body>
</html>